import React, {
    useState,
    useEffect,
    useMemo,
    useCallback,
    useLayoutEffect
} from "react"
import { connect, useDispatch } from "react-redux"
import {
    LgSideBarA,
    LgTabs
} from "lancoo-web-ui"
import { HashRouter as Router, Route } from "react-router-dom"
import { registerMicroApps, start } from 'qiankun';
import {getQueryVariable,removeToken} from "../../util";
import axiosMethod from "../../util/axios";
import $ from "jquery";
import "./index.scss"
import QiankunPage from "./qiankunPage";
import IframePage from "./iframePage";
import Scrollbars from "react-custom-scrollbars";
import { message } from "antd";
import BackOrReduction from "./backOrReduction";
import BackupsHistory from "./drawer/backupsHistory";

const skinColors = {
    "1": "#083E79",
    "2": "#0290FD",
    "3": "#003CB2",
    "4": "#036638",
    "5": "#4C40AB",
    "6": "#A60808"
}

const pageParams = {
    "network-access-statistics/user-usage-statistics": {
        type: "qiankun",
        sysId: "000",
        key: "network-access-statistics/user-usage-statistics",
        url: "html/network-access-statistics/",
        params: ['baseUrl', 'skin', 'drawerContainer']
    },
    "network-access-statistics/terminal-usage-statistics": {
        type: "qiankun",
        sysId: "000",
        key: "network-access-statistics/terminal-usage-statistics",
        url: "html/network-access-statistics/",
        params: ['baseUrl', 'skin']
    },
    "network-access-statistics/login-exception-log": {
        type: "qiankun",
        sysId: "000",
        key: "network-access-statistics/login-exception-log",
        url: "html/network-access-statistics/",
        params: ['baseUrl', 'skin']
    },
    "online-user-management": {
        type: "qiankun",
        sysId: "000",
        key: "online-user-management",
        url: "html/online-user-management/",
        params: ['baseUrl', 'skin']
    },
    "app-count-statistics": {
        type: "qiankun",
        sysId: "260",
        key: "app-count-statistics",
        url: "html/appManager/index.html#/app-count-statistics",
        params: ['baseUrl', 'token', 'iframe']
    },
    "app-usage-statistics": {
        type: "qiankun",
        sysId: "260",
        key: "app-usage-statistics",
        url: "html/appManager/index.html#/app-usage-statistics",
        params: ['baseUrl', 'token', 'iframe']
    },
    "server-management": {
        type: "open",
        sysId: "N11",
        key: "server-management",
        url: "apps/?lg_tk=[token]&lg_ic=[identityCode]"
    },
    "backups-reduction": {
        type: "self",
        sysId: "260",
        key: "backups-reduction"
    },
    "problem-feedback-box": {
        type: "iframe",
        sysId: "231",
        key: "problem-feedback-box",
        url: "feedback/web/all/index.html?lg_tk=[token]&lg_ic=[identityCode]&openPage=detailList&pageType=admin"
    },
    "log-operation-type": {
        type: "iframe",
        sysId: "894",
        key: "log-operation-type",
        url: "index.html?lg_tk=[token]&lg_ic=[identityCode]&isIframe=true#/home/operation-type/1"
    },
    "log-user-identity": {
        type: "iframe",
        sysId: "894",
        key: "log-user-identity",
        url: "index.html?lg_tk=[token]&lg_ic=[identityCode]&isIframe=true#/home/user-identity/2"
    },
    "log-operation-terminal": {
        type: "iframe",
        sysId: "894",
        key: "log-operation-terminal",
        url: "index.html?lg_tk=[token]&lg_ic=[identityCode]&isIframe=true#/home/operator-terminal/3"
    },
    "log-sub-system": {
        type: "iframe",
        sysId: "894",
        key: "log-sub-system",
        url: "index.html?lg_tk=[token]&lg_ic=[identityCode]&isIframe=true#/home/sub-system/4"
    },
}

function SideBar (props) {
    let {
        userInfo,
        currentIdentity,
        identityList,
        sysAddrInfo,
        sysInfo,
        skinInfo
    } = props
    const dispatch = useDispatch()
    const [dark, setDark] = useState(false)
    const [open, setOpen] = useState(true)
    const [menuList, setMenuList] = useState([])
    const [historyList, setHistoryList] = useState([])
    const [historyIndex, setHistoryIndex] = useState(0)


    const darkChange = () => {
        if(dark){
            document.body.classList.add("light-dark");
        } else {
            document.body.classList.remove("light-dark");
        }
        setDark(!dark)
    }
    const openChange = () => {
        setOpen(!open)
    }
    const update = (data) => {
        let sign = false;
        data.forEach((item)=>{
            Array.isArray(item.sublist) &&
            item.sublist.forEach((child)=>{
                if(child.info.key === "server-management" && child.selected){
                    sign = true;
                }
            })
        })
        if(sign){
            return;
        }
        setMenuList(data)
    }

    const openWebPage = useCallback((data)=>{
        let url = data.url.replace("[token]", sessionStorage.getItem("token")).replace("[identityCode]", currentIdentity.identityCode);
        window.open(sysAddrInfo[data.sysId]?.webSvrAddr + url);
    }, [sysAddrInfo, currentIdentity]);

    const updateMenuSelected = (list, router, callback) => {
        list.forEach((item) => {
            if (item?.info?.router === router) {
                item.selected = true
                if(item.color === "auto"){
                    document.body.classList.add("nav-auto");
                } else {
                    document.body.classList.remove("nav-auto");
                }
            } else {
                item.selected = false
            }
            Array.isArray(item.sublist) &&
                item.sublist.forEach((child) => {
                    if (child?.info?.router === router) {
                        child.selected = true
                        if(child.color === "auto"){
                            document.body.classList.add("nav-auto");
                        } else {
                            document.body.classList.remove("nav-auto");
                        }
                    } else {
                        child.selected = false
                    }
                })
        })
        callback(list)
    }
    const selectedItem = useCallback((data) => {
        console.log("选中的item", data)
        if(data.info.key === "server-management"){
            openWebPage(pageParams[data.info?.key]);
            return;
        }
        if(data.color === "auto"){
            document.body.classList.add("nav-auto");
        } else {
            document.body.classList.remove("nav-auto");
        }
        window.location.hash = `#/${data.info.router}`


        let list = JSON.parse(JSON.stringify(historyList))
        let historyOne = {
            key: data.info.key,
            label: data.text,
            info: data.info,
        }
        let exist = false
        list.forEach((item, index) => {
            if (item.key === data.info.key) {
                exist = index
            }
        })
        if (typeof exist === "number") {
            setHistoryIndex(exist)
        } else {   //之前没点击过，就把点击的导航添加到历史记录里
            list.push(historyOne)
            setHistoryIndex(list.length - 1)
        }
        if (list.length === 1) {
            list[0].closable = false
        } else {
            list.forEach(item => item.closable = true)
        }
        if(pageParams[data.info?.key]?.type === "open"){
            openWebPage(pageParams[data.info?.key]);
        }
        setHistoryList(list)
    }, [historyList, openWebPage])

    const historyClick = useCallback((index) => {
        let one = historyList[index]
        console.log(one)
        // let menu = JSON.parse(JSON.stringify(menuList))
        let menu = menuList
        updateMenuSelected(menu, one.info.router, function (arr) {
            setMenuList(arr)
        })
        setHistoryIndex(index)
        if(pageParams[one.info?.key]?.type === "open"){
            openWebPage(pageParams[one.info?.key]);
        }
        window.location.hash = `#/${one.info.router}`
    }, [menuList, historyList])

    const historyClose = useCallback((index) => {
        let list = JSON.parse(JSON.stringify(historyList))
        // let menu = JSON.parse(JSON.stringify(menuList))
        let menu = menuList;
        list.splice(index, 1)
        let one = list[index > list.length - 1 ? index - 1 : index]
        updateMenuSelected(menu, one.info.router, function (arr) {
            setMenuList(arr)
        })
        if (list.length === 1) {
            list[0].closable = false
        } else {
            list.forEach(item => item.closable = true)
        }
        setHistoryList(list)
        setHistoryIndex(index > list.length - 1 ? index - 1 : index)
        window.location.hash = `#/${one.info.router}`
    }, [menuList, historyList])

    // 查询出identityList里能进入moduleIds模块里的identityCode
	const checkModulesIdentity = (moduleIDs) => {
		return new Promise(resolve => {
			let obj = {
				appid: "260",
				access_token: "66d5dbb07ac770bdf3f3381e07632f4a",
				moduleIDs,
				eduId: userInfo.eduId
			};
            if(!moduleIDs){
                resolve("");
                return;
            }
			axiosMethod({
				type: "post",
				url:
					sessionStorage.getItem("baseUrl") +
					"/BaseApi/PowerMgr/GetIdentityTypeByModuleIDs",
				body: obj,
				callback: (res, result) => {
					if (result.ErrCode != 0) {
						resolve("");
						return;
					}
					let eduId = userInfo.eduId;
					for (let o in result.Data) {
						for (let i in result.Data[o].IdentityTypes) {
                            if (
                                eduId + "-" + currentIdentity.identityCode ===
                                result.Data[o].IdentityTypes[i].IdentityID
                            ) {
                                resolve(currentIdentity.identityCode);
                                return;
                            }
						}
					}
					resolve("");
				}
			});
		});
	};
    const checkRole = (arr) => {
        return new Promise((resolve, reject)=>{
            let count = 0;
            arr.forEach(async (item)=>{
                item.role = await checkModulesIdentity(item.moduleId);
                count++;
                if(count === arr.length){
                    resolve(arr);
                }
            })
        })
    }
    //通过hash，判断定位到哪个界面
    useLayoutEffect(() => {
        //获取分类列表
        let hash = window.location.hash.replace("#/", "")
        let navList = [
            {
                text: "平台访问统计",
                open: true,
                moduleId: "000002",
                sublist: [
                    {
                        text: "用户上机统计",
                        selected: true,
                        info: {
                            key: "network-access-statistics/user-usage-statistics",
                            router: "network-access-statistics/user-usage-statistics"
                        },
                    },
                    {
                        text: "终端使用统计",
                        info: {
                            key: "network-access-statistics/terminal-usage-statistics",
                            router: "network-access-statistics/terminal-usage-statistics"
                        },
                    },
                    {
                        text: "登录异常统计",
                        info: {
                            key: "network-access-statistics/login-exception-log",
                            router: "network-access-statistics/login-exception-log"
                        },
                    }
                ],
                info: {
                    key: "base-info",
                    router: "base-info"
                },
                icon: (
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <g id="用户上机统计" transform="translate(-116 -116)">
                        <path id="联合_46" data-name="联合 46" d="M14.5-208H.5a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5H1v-14.5a.5.5,0,0,1,.5-.5h3a.5.5,0,0,1,.5.5V-209H6v-7.5a.5.5,0,0,1,.5-.5h3a.5.5,0,0,1,.5.5v7.5h1v-12.5a.5.5,0,0,1,.5-.5h3a.5.5,0,0,1,.5.5V-209h.5a.5.5,0,0,1,.5.5.5.5,0,0,1-.5.5Zm-.5-1v-12H12v12Zm-5,0v-7H7v7Zm-5,0v-14H2v14Z" transform="translate(116 340)" fill="#0290fd"/>
                    </g>
                    </svg>
                )
            },
            {
                text: "在线用户管理",
                color: "auto",
                moduleId: "000003",
                info: {
                    key: "online-user-management",
                    router: "online-user-management"
                },
                icon: (
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <g id="在线用户管理" transform="translate(-116 -220)">
                        <path id="路径_278" data-name="路径 278" d="M96.433,74.416l-.663-3.24a1.057,1.057,0,0,1,.184-.6.292.292,0,0,1,.227-.09h0a2.509,2.509,0,0,0,2.467-2.557,2.6,2.6,0,0,0-1.027-2.079l-.337-.252-.1.421a6.035,6.035,0,0,1-3.529,4.194l-.243.1,1.211,4.108H93.539l-1.072-4.04a.993.993,0,0,1,.079-.639.6.6,0,0,1,.424-.26L93,69.469a4.967,4.967,0,1,0-2.892.02c.513.171.458.931.457.938l-1.059,3.988h-.9L89.8,70.374l-.253-.1A6.007,6.007,0,0,1,85.874,66l-.089-.373-.363.21-.018.02a2.6,2.6,0,0,0-1,2.061,2.5,2.5,0,0,0,2.442,2.557h0a.308.308,0,0,1,.249.09,1.054,1.054,0,0,1,.184.6l-.663,3.24H85.593l.9-3.022-.306-.065a3.447,3.447,0,0,1-2.659-3.405,3.485,3.485,0,0,1,1.994-3.184l.168-.077,0-.191a5.841,5.841,0,1,1,11.673,0l0,.191.167.077a3.484,3.484,0,0,1,1.994,3.183,3.448,3.448,0,0,1-2.659,3.406l-.306.065.9,3.022H96.433Zm-4.909-6.788a2.961,2.961,0,0,1-2.855-2.409l-.01-.045-.023-.04a.456.456,0,0,1-.071-.226.438.438,0,1,1,.876,0v.3h.1a2.056,2.056,0,0,0,3.963,0h.1v-.3a.438.438,0,1,1,.876,0,.455.455,0,0,1-.071.226l-.022.04-.01.045a2.961,2.961,0,0,1-2.855,2.409Zm0,0" transform="translate(32.477 161.584)" fill="#0290fd"/>
                    </g>
                    </svg>
                )
            },
            {
                text: "应用统计",
                open: true,
                moduleId: "Y00004",
                sublist: [
                    {
                        text: "应用数量统计",
                        color: "auto",
                        info: {
                            key: "app-count-statistics",
                            router: "app-count-statistics"
                        },
                    },
                    {
                        text: "应用使用统计",
                        info: {
                            key: "app-usage-statistics",
                            router: "app-usage-statistics"
                        },
                    }
                ],
                info: {
                    key: "app-manager",
                    router: "app-manager"
                },
                icon: (
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <g id="社团组织管理" transform="translate(-94.993 -98.48)">
                        <path id="路径_285" data-name="路径 285" d="M104.216,99.743l6.205,3.189-6.205,3.189-6.205-3.189,6.205-3.189m0-1.263a.8.8,0,0,0-.42.119l-7.2,3.7a.74.74,0,0,0,0,1.268l7.2,3.7a.8.8,0,0,0,.839,0l7.2-3.7a.74.74,0,0,0,0-1.268l-7.2-3.7A.8.8,0,0,0,104.216,98.48Z" transform="translate(-1.224 0)" fill="#0290fd"/>
                        <path id="路径_286" data-name="路径 286" d="M102.985,509.522a1.4,1.4,0,0,1-.708-.191l-6.954-3.565a.6.6,0,0,1-.26-.813.62.62,0,0,1,.828-.255l6.994,3.586.021.013a.152.152,0,0,0,.159,0l.021-.013.022-.011,6.986-3.6a.62.62,0,0,1,.829.253.6.6,0,0,1-.258.813l-6.967,3.589A1.4,1.4,0,0,1,102.985,509.522Z" transform="translate(0 -398.629)" fill="#0290fd"/>
                        <path id="路径_287" data-name="路径 287" d="M102.985,703.912a1.4,1.4,0,0,1-.708-.191l-6.954-3.565a.6.6,0,0,1-.26-.813.62.62,0,0,1,.828-.255l6.994,3.586.021.013a.152.152,0,0,0,.159,0l.021-.013.022-.011,6.986-3.6a.62.62,0,0,1,.829.253.6.6,0,0,1-.258.813l-6.967,3.59A1.4,1.4,0,0,1,102.985,703.912Z" transform="translate(0 -589.432)" fill="#0290fd"/>
                    </g>
                    </svg>
                )
            },
            {
                text: "平台运维",
                open: true,
                moduleId: "260010",
                sublist: [
                    {
                        text: "服务器管理",
                        info: {
                            key: "server-management",
                            router: "server-management"
                        },
                    },
                    // {
                    //     text: "数据备份还原",
                    //     info: {
                    //         key: "backups-reduction",
                    //         router: "backups-reduction"
                    //     }
                    // },
                    {
                        text: "问题反馈箱",
                        info: {
                            key: "problem-feedback-box",
                            router: "problem-feedback-box"
                        }
                    }
                ],
                info: {
                    key: "app-manager",
                    router: "app-manager"
                },
                icon: (
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <path id="联合_88" data-name="联合 88" d="M12.118,2.528a2.005,2.005,0,0,0-.355,1.139,2.119,2.119,0,0,0,4.237,0,2.093,2.093,0,0,0-2.118-2.061,2.168,2.168,0,0,0-.891.192A7.742,7.742,0,0,0,4.789.71a.549.549,0,0,0-.27.736.578.578,0,0,0,.757.262,6.577,6.577,0,0,1,6.842.819Zm2.75,1.139a.984.984,0,1,1-.984-.957.971.971,0,0,1,.984.957ZM4.793,12.758a6.259,6.259,0,0,1-3.187-5.4,6.043,6.043,0,0,1,.227-1.648,2.078,2.078,0,0,0,.286.019A2.093,2.093,0,0,0,4.237,3.667,2.093,2.093,0,0,0,2.118,1.606,2.093,2.093,0,0,0,0,3.667a2.047,2.047,0,0,0,.783,1.6A7.12,7.12,0,0,0,.47,7.357a7.349,7.349,0,0,0,3.747,6.352.576.576,0,0,0,.776-.2.544.544,0,0,0-.2-.755ZM2.115,2.71a.957.957,0,1,1,0,1.914.957.957,0,1,1,0-1.914Zm12.918,4.1a.558.558,0,0,0-.566.55A6.259,6.259,0,0,1,10.049,13.3a2.119,2.119,0,0,0-2.013-1.421,2.062,2.062,0,1,0,2.056,2.56A7.374,7.374,0,0,0,15.6,7.357a.563.563,0,0,0-.569-.55Zm-7,8.09a.957.957,0,1,1,.984-.957A.971.971,0,0,1,8.036,14.9Z" transform="translate(0)" fill="#0290fd"/>
                    </svg>
                )
            },
            {
                text: "操作日志",
                open: true,
                sysId: 894,
                moduleId: "894001",
                sublist: [
                    {
                        text: "按用户身份查看",
                        info: {
                            key: "log-user-identity",
                            router: "log-user-identity"
                        },
                    },
                    {
                        text: "按子系统查看",
                        info: {
                            key: "log-sub-system",
                            router: "log-sub-system"
                        },
                    },
                    {
                        text: "按操作类型查看",
                        info: {
                            key: "log-operation-type",
                            router: "log-operation-type"
                        },
                    },
                    
                    {
                        text: "按操作终端查看",
                        info: {
                            key: "log-operation-terminal",
                            router: "log-operation-terminal"
                        },
                    }
                ],
                info: {
                    key: "app-manager",
                    router: "app-manager"
                },
                icon: (
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                    <g id="用户档案管理" transform="translate(-90 -90)">
                        <path id="减去_7" data-name="减去 7" d="M4692-4206h-11a1,1,0,0,1-1-1v-11a1,1,0,0,1,1-1h11a1,1,0,0,1,1,1v11A1,1,0,0,1,4692-4206Zm-11-12v11h11v-11Z" transform="translate(-4590 4309)" fill="#0290fd"/>
                        <rect id="矩形_806" data-name="矩形 806" width="14" height="1" rx="0.5" transform="translate(92 105)" fill="#0290fd"/>
                        <rect id="矩形_807" data-name="矩形 807" width="1" height="14" rx="0.5" transform="translate(105 92)" fill="#0290fd"/>
                        <rect id="矩形_808" data-name="矩形 808" width="7" height="1" rx="0.5" transform="translate(93 94)" fill="#0290fd"/>
                        <rect id="矩形_810" data-name="矩形 810" width="7" height="1" rx="0.5" transform="translate(93 96)" fill="#0290fd"/>
                        <rect id="矩形_811" data-name="矩形 811" width="7" height="1" rx="0.5" transform="translate(93 98)" fill="#0290fd"/>
                    </g>
                    </svg>
                )
            },
        ]
        navList = checkRole(navList);
        navList.then((arr)=>{
            arr = arr.filter(item=>item.role);
            if(!arr.length){
                message.warn("当前用户无权限访问，请重新登录");
                sessionStorage.removeItem("token");
                localStorage.removeItem("token");
                window.location.href = sessionStorage.getItem("baseUrl") + `login.html?lg_sysid=260&lg_preurl=${encodeURIComponent(removeToken(window.location.href))}`
                return;
            }
            let one = arr[0]?.sublist?.[0];
            let historyList = [{
                key: one?.info?.key,
                label: one?.text,
                info: {
                    key: one?.info?.key,
                    router: one?.info?.key
                },
            }]
            arr = arr.filter(item=>!item.sysId||sysAddrInfo[item.sysId]);  //检查一级目录是否部署
            arr = arr.map((item)=>{  //检查子目录是否部署
                let obj = {...item};
                if(Array.isArray(item.sublist)){
                    obj.sublist = [];
                    item.sublist.forEach((child)=>{
                        if(pageParams[child.info?.key].sysId && sysAddrInfo[pageParams[child.info?.key].sysId]){
                            obj.sublist.push(child);
                        }
                    })
                }
                return obj;
            })
            arr = arr.filter(item=>!item.sublist || item.sublist.length);
            //如果是不存在的hash，则默认展示应用桌面界面
            let hashList = [];
            arr.forEach((item)=>{
                if(item.sublist){
                    item.sublist.forEach((child)=>{
                        hashList.push(child.info?.key);
                    })
                } else {
                    hashList.push(item.info?.key);
                }
            })
            if (!hash || !hashList.filter(item=>hash.indexOf(item)>-1).length) {
                hash = historyList[0].key
                window.location.hash = `#/${historyList[0].key}`
            }
            hash &&
                arr.forEach((item) => {
                    // if (item.info.router === hash) {
                        if (hash.indexOf(item.info.router)>-1) {
                        historyList = [{
                            key: item.info.key,
                            label: item.text,
                            info: item.info,
                        }]
                        item.selected = true
                        item.color = "#fff";
                        if(item.color === "auto"){
                            document.body.classList.add("nav-auto");
                        } else {
                            document.body.classList.remove("nav-auto");
                        }
                    } else {
                        item.selected = false
                    }
                    Array.isArray(item.sublist) &&
                        item.sublist.forEach((child) => {
                            // if (child.info.router === hash) {
                                if (hash.indexOf(child.info.router)>-1) {
                                historyList = [{
                                    key: child.info.key,
                                    label: child.text,
                                    info: child.info,
                                }]
                                child.selected = true
                                if(child.color === "auto"){
                                    document.body.classList.add("nav-auto");
                                } else {
                                    document.body.classList.remove("nav-auto");
                                }
                            } else {
                                child.selected = false
                            }
                        })
                })
            if (historyList.length === 1) {
                historyList[0].closable = false
            } else {
                historyList.forEach(item => item.closable = true)
            }
            setHistoryList(historyList)
            update(arr)
        })
        return;
    }, [skinInfo.userSkin, sysAddrInfo])

    useEffect(()=>{
        let arr = [];
        if(!menuList.length){
            return;
        }
        menuList.forEach((item)=>{
            if(item.sublist){
                item.sublist.forEach((child)=>{
                    if(pageParams[child.info?.key].type === "qiankun"){
                        arr.push(pageParams[child.info?.key]);
                    }
                })
            } else {
                if(pageParams[item.info?.key].type === "qiankun"){
                    arr.push(pageParams[item.info?.key]);
                }
            }
        })
        const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
        let apps = arr.map((item)=>{
            let base = item.sysId === "000"? sysInfo.baseUrl: sysAddrInfo[item.sysId].webSvrAddr;
            let token = sessionStorage.getItem("token");
            let url = item.url.replace("[token]", token).replace("[identityCode]", currentIdentity.identityCode);
            let params = {};
            item.params.forEach((child)=>{
                if(child === "basename"){
                    params[child] = item.baseName;
                }
                if(child === "baseUrl"){
                    params[child] = base;
                }
                if(child === "token"){
                    params[child] = token;
                }
                if(child === "skin"){
                    params[child] = `s${skinInfo.userSkin}`;
                }
                if(child === "drawerContainer"){
                    params[child] = $(".app-sidebar")[0];
                }
                if(child === "iframe"){
                    params[child] = "true";
                }
                if(child === "page"){
                    params[child] = item.page;
                }
            })
            return {
                name: item.key,
                entry: base + url,
                container: "#platform-qiankun-container",
                // container: `#${item.key.replace("-", "")}`,
                activeRule: getActiveRule(`#/${item.key}`),
                props: params
            }
        })
        registerMicroApps(apps, {
            beforeLoad: (app) => console.log('before load', app.name),
            beforeMount: [(app) => console.log('before mount', app.name)],
        });
        start(); 
        
    }, [menuList, sysInfo, skinInfo, sysAddrInfo, currentIdentity]);

    return (
        <div className="app-sidebar">
            <LgSideBarA
                datalist={menuList}
                dark={dark}
                open={open}
                darkChange={darkChange}
                openChange={openChange}
                update={update}
                selectedItem={selectedItem}
            >
                <div className="app-side-bar-body">
                    <LgTabs
                        data={historyList}
                        position='top'
                        closable={true}
                        type='card'
                        defaultTabIndex={historyIndex}
                        contentIsShow={false}
                        onTabClick={historyClick}
                        onCloseClick={historyClose}
                    ></LgTabs>
                    <Scrollbars style={{height: "calc(100vh - 114px)"}}>
                        {
                            pageParams[window.location.hash.replace("#/", "")]?.type === "iframe"?
                            <IframePage data={pageParams[window.location.hash.replace("#/", "")]} />:
                            pageParams[window.location.hash.replace("#/", "")]?.type === "qiankun"?
                            <div id="platform-qiankun-container"></div>:
                            pageParams[window.location.hash.replace("#/", "")]?.type === "self"?
                            pageParams[window.location.hash.replace("#/", "")]?.key === "backups-reduction"?
                            <BackOrReduction />:
                            "":
                            ""
                        }
                    </Scrollbars>
                    <BackupsHistory />
                </div>
            </LgSideBarA>
        </div>
    )
}

const mapProps = (state) => {
    return {
        userInfo: state.userInfo,
        currentIdentity: state.currentIdentity,
        identityList: state.identityList,
        sysInfo: state.sysInfo,
        sysAddrInfo: state.sysAddrInfo,
        skinInfo: state.skinInfo
    }
}
export default connect(mapProps)(SideBar)